<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="/node_modules/swiper/swiper-bundle.min.css" />

    <link rel="stylesheet" href="/static/styles/page.css" />
    <link rel="stylesheet" href="/static/styles/style.css" />
    <style>
      /* ----------------------------------------------
 * Generated by Animista on 2023-8-22 9:24:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

      /**
 * ----------------------------------------
 * animation rotate-vert-right
 * ----------------------------------------
 */
      @-webkit-keyframes rotate-vert-right {
        0% {
          -webkit-transform: rotateY(0);
          transform: rotateY(0);
          -webkit-transform-origin: right;
          transform-origin: right;
        }
        100% {
          -webkit-transform: rotateY(-360deg);
          transform: rotateY(-360deg);
          -webkit-transform-origin: right;
          transform-origin: right;
        }
      }
      @keyframes rotate-vert-right {
        0% {
          -webkit-transform: rotateY(0);
          transform: rotateY(0);
          -webkit-transform-origin: right;
          transform-origin: right;
        }
        100% {
          -webkit-transform: rotateY(-360deg);
          transform: rotateY(-360deg);
          -webkit-transform-origin: right;
          transform-origin: right;
        }
      }

      .rotate-vert-right {
        -webkit-animation: rotate-vert-right 0.5s
          cubic-bezier(0.645, 0.045, 0.355, 1) both;
        animation: rotate-vert-right 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)
          both;
      }
      @keyframes jumpBox {
        0% {
          height: 25px;
          transform: translateY(0px) scale(0.8);
        }
        50% {
          transform: translateY(-100px);
          height: 25px;
        }
        75% {
         height: 50px;
        }
        100% {
          transform: translateY(0);
          height: 25px;
        }
      }


      .jumpbox {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        animation: jumpBox 3s ease-in infinite;
        margin-top: 200px;
      }
    </style>
  </head>
  <body>
    <div class="jumpbox">

    </div>
    <!-- <div class="RightToLeft w-50 text-white position-relative rotate-vert-right bg-black">123123</div>
    <div
      class="position-fixed bg-black h-100 offcan RightToLeft d-none"
      style="width: 200px"
    >
      1234
      <button class="btn btn-danger close">close</button>
    </div>
    <button class="btn btn-danger open">123</button>
    <script>
      document.querySelector(".open").addEventListener("click", function () {
        document
          .querySelector(".offcan")
          .classList.remove("d-none", "RightToLeft");
        document.querySelector(".offcan").classList.add("leftToRight");
      });

      document.querySelector(".close").addEventListener("click", function () {
        document.querySelector(".offcan").classList.remove("leftToRight");
        document.querySelector(".offcan").classList.add("RightToLeft");
      });
    </script> -->
  </body>
</html>
